<template>
  <div class="first">
		<img :class="'icon'+index" v-for="(item,index) of base64.icon" :src="item" alt="" />
		<div :style="scale.title" class="title">
			<span class="o">
				<img :src="base64.imgsrc" alt="" /> 
				第一志愿
			</span>
			<div class="a">
				高考学生最受欢迎的
			</div>
			<div class="b">
				高考志愿填报工具
			</div>
		</div>
		<div :style="scale.base" class="container">
			<div class="iphonepc">
				<img :src="base64.iphonepc" alt="" />
			</div>
			<div class="carousalbox">
				<carousala :t=t></carousala>
			</div>
		</div>
	</div>
</template>

<script>
	import carousala from "@/components/carousal/carousala.vue"
	import scale from "@/modules/scale"
	export default {
		components:{carousala},
	  data () {
			return {
				base64: {
					imgsrc: "",
					icon: [
						"", "", "", "", "", "", ""
					],
					iphonepc: ""
				},
				t:{
					clist: [{
						title: '优势一',
						content: '精准预测录取概率'
					}, {
						title: '优势二',
						content: '数据可视化查看往年录取信息'
					}, {
						title: '优势三',
						content: '智能分析给出详细填报建议'
					}, {
						title: '优势四',
						content: '权威测试选定合适专业'
					}, {
						title: '优势五',
						content: '深度解读最新填报政策'
					}, {
						title: '优势六',
						content: '独家信息披露毕业薪酬报告'
					}],
				}
			}
		},
		computed:{
			scale:scale.scale
		},
		methods: {
			
		},
		created() {

		}
	}
</script>

<style lang="less" scoped>
	@c1: #2c8bfd;
	#obox {
		height: 100%;
	}
	.first {
		background: @c1;
		height: 100%;
		box-sizing: border-box;
		overflow: hidden;
		.title {
			.o{
				font-size: 23px;
				img{
					height: 40px;
				}
			}
			.a{
				font-size: 28px;
				margin-top:5px;
			}
			.b {
				font-size: 33px;
				font-weight: 600;
				width: 100%;
			}
			text-align: center;
			color: #fff;
			line-height: 44px;
			height: 135px;
			text-align: center;
			color: #fff;
		}
	}
	
	.first>img {
		position: absolute;
	}
	
	.icon0 {
		width: 65px;
		left: 29px;
		top: 73px;
	}
	
	.icon1 {
		width: 44px;
		right: 15px;
		top: 109px;
	}
	
	.icon2 {
		width: 67px;
		left: 149px;
		top: 200px;
	}
	
	.icon3 {
		width: 53px;
		right: 42px;
		top: 394px;
	}
	
	.icon4 {
		width: 29px;
		left: 2px;
		bottom: 89px;
	}
	
	.icon5 {
		width: 42px;
		left: 161px;
		bottom: 100px;
	}
	
	.icon6 {
		width: 42px;
		right: 0px;
		bottom: 0px;
	}
	.iphonepc {
		text-align: center;
		height:50%;
		>img {
			height:90%;
		}
	}
</style>